Hi Dai Gei Ho~ 我是Winnie ~

延續昨天螢幕畫面分享上篇章節，我們透過 Chrome.desktopCapture 方法，在Extension的背後腳本事件取得了使用者分享螢幕畫面的資訊，並且回傳給外部頁面中，完成了 Extension 端的功能邏輯，而在今天我們要從網頁中 Content Script 來進行說明。

首先，在外部網頁的畫面中 我們需先準備兩顆按鈕，分別是 分享螢幕、暫停分享螢幕 及 播放分享畫面的 video 播放區塊。

以 vue 為例:

<template>
  <div class="wrap">
    <div class="container">
      <button @click="getScreen" :disabled="isGetScreen">分享螢幕</button>
      <button @click="stopScreen" :disabled="isStopScreen">暫停分享</button>
    </div>
    <div class="share">
      <video autoplay  ref="screenDom" width="1000" ></video>
    </div>
  </div>
</template>

向 Background 發送訊息，請求權限

接著，在分享螢幕按鈕中 綁定Click 監聽事件，當點擊時 getScreen()中 會透過sendMessage方法向 Background 背後腳本 傳遞訊息通知Extension 向使用者請求螢幕分享權限。

// App.vue
<template>
  <div class="wrap">
    <div class="container">
      <button @click="getScreen" :disabled="isGetScreen">分享螢幕</button>
      <button @click="stopScreen" :disabled="isStopScreen">暫停分享</button>
    </div>
    <div class="share">
      <video autoplay  ref="screenDom" width="1000" ></video>
    </div>
  </div>
</template>

<script>
import {ref} from 'vue'
export default {
 setup(){
     let extensionId = XXXXX //這邊可以放上自己的Extension ID
     const getScreen = e => { 
    console.log(e)
    chrome.runtime.sendMessage(extensionID , { sources: ['window', 'screen', 'tab'] }, res => {});
  }
  
  return {
   getScreen 
  }
}

</script>
 

這邊的 sources 的'window'、'screen'、'tab'，分別為要請求的範圍，像是視窗、螢幕、分頁

將螢幕畫面資料 注入 video 中

mediaDevices 可以存取連接的媒體輸入設備，像是相機、麥克風，以及螢幕分享。

當成功取得螢幕權限後，透過mediaDevices.getUserMediaAPI方法來提示使用者給予使用媒體輸入的許可，同時設定選項中我們需把 chromeMediaSource應該設置為'desktop'，且透過回傳res.streamId指定給 chromeMediaSourceId。

接著，其函式會回傳一個Promise，我們可以得到一個 MediaStream物件 指定給 screenDom 中的 srcObject，即可同步顯示螢幕分享畫面。

// App.vue

<template>
  <div class="wrap">
    <div class="container">
      <button @click="getScreen" :disabled="isGetScreen">分享螢幕</button>
      <button @click="stopScreen" :disabled="isStopScreen">暫停分享</button>
    </div>
    <div class="share">
      <video autoplay  ref="screenDom" width="1000" ></video>
    </div>
  </div>
</template>

<script>

 setup(){
 
   let screenDom = ref(null); // 透過 ref 取得 <video> Dom
    
   const getScreen = ()=>{
   ...略
  (res)=>{
      
    if (res && res.type === 'success') {
        navigator.mediaDevices.getUserMedia({
          video: {
            mandatory: {
              chromeMediaSource: 'desktop',
              chromeMediaSourceId: res.streamId,
            }
          }
        })
        .then(mediaStream=>{
          stream = mediaStream;
          screenDom.value.srcObject= stream;
        })

      } else {
        console.error('Could not get stream');
      }
  }
  ...略
  }
  
  return {
    getScreen,
    screenDom
  }
  
}
</script>

停止分享畫面

最後要停止分享螢幕畫面時，我們可以透過 stream.getTracks() 來停止，並將video的stream清空，即可完成停止分享畫面。

這邊注意 MediaStreamTrack 為一個陣列，需透過迴圈方式將其裡面的track值來停止。

 ...略
  const stopScreen =() => { 
    stream.getTracks().forEach(track => track.stop());
    stream=''
  }
  ...略

DEMO

最後來看看，實際效果吧（

以上就是針對 Chrome Extension 分享畫面功能的介紹，後續會再將實作範例整理好放置上來，再請各位見諒。
那今天文章先到這邊了，謝謝願意花時間看此篇文章的你，如果文章有錯誤的地方，再麻煩不吝嗇的給予指教，感謝!!

今日有感而發:

這個 分享螢幕畫面的實作 算是可以列為這幾天最有感的功能之一了，
畢竟是在即將壓線的最後半小時才熱騰騰的成功做出來，差點在28天G掉，心臟真4要跳出來了
其實原本預計規劃是還要做截圖功能 之後應該會再補齊
今日分享-> 五月天 倔強